<template>
  <div class="index">
    <!-- <div class="flex"> -->
      <div style="position: absolute; height: 108px; width: 1920px; top: 0; left: 0; z-index: 9;">
        <img src="../assets/img/z21.png">
      </div>

      <div style="position: absolute; top: 108px; left: 20px; width: 500px; height: 380px; background: rgba(255,255,255,0.1); z-index: 9; border: 1px #176692 solid; border-radius: 5px;">
        <div style="height: 50px; line-height: 50px; padding-left: 30px; border-bottom: 1px #176692 solid; color: #FFFFFF;">高关联事件</div>
        <div class="flex" style="justify-content: space-around; padding: 70px 0 40px;">
          <div>
            <div id="shuiqiu1" style="width: 140px; height: 140px;"></div>
          </div>
          <div>
            <div id="shuiqiu2" style="width: 140px; height: 140px;"></div>
          </div>
          <div>
            <div id="shuiqiu3" style="width: 140px; height: 140px;"></div>
          </div>
        </div>
        <div class="flex" style="justify-content: space-around;">
          <div>
            <div style="width: 140px; height: 140px; text-align: center; color: #FFFFFF;">张伟贩毒和王伟贩毒</div>
          </div>
          <div>
            <div style="width: 140px; height: 140px; text-align: center; color: #FFFFFF;">张伟贩毒和王伟贩毒</div>
          </div>
          <div>
            <div style="width: 140px; height: 140px; text-align: center; color: #FFFFFF;">张伟贩毒和王伟贩毒</div>
          </div>
        </div>

      </div>
      <div style="position: absolute; top: 500px; left: 20px; width: 500px; height: 470px; background: rgba(255,255,255,0.1); z-index: 9; border: 1px #176692 solid; border-radius: 5px;">
        <div style="height: 50px; line-height: 50px; padding-left: 30px; border-bottom: 1px #176692 solid; color: #FFFFFF;">高关联事件</div>
        <div class="flex dd" style="text-align: center;  height: 42px; line-height: 42px; border-bottom: 1px #052d44 solid; color: #fff; background: rgba(0,0,0,0.3); font-size: 12px;">
          <div class="d1">相关度</div>
          <div class="d1">样品1</div>
          <div class="d1">样品2</div>
          <div class="d1">样品3</div>
          <div class="d1">样品4</div>
          <div class="d1">样品5</div>
          <div class="d1">样品6</div>
        </div>
        <div style="height: 378px; overflow: hidden;" id="test">
          <div style="width: 500px; height: 42px; line-height: 42px; border-bottom: 1px #052d44 solid; font-size: 12px; color: #fff;" v-for="(item,index) in 20">
          	<div class="flex dd" style="text-align: center;">
              <div class="d1">样品{{index+1}}</div>
              <div class="d1">1</div>
              <div class="d1">2</div>
              <div class="d1">3</div>
              <div class="d1">4</div>
              <div class="d1">5</div>
              <div class="d1">6</div>
            </div>
          </div>
        </div>

      </div>

      <div style="position: absolute; top: 108px; right: 20px; width: 500px; height: 380px; background: rgba(255,255,255,0.1); z-index: 9; border: 1px #176692 solid; border-radius: 5px;">
        <div style="height: 50px; line-height: 50px; padding-left: 30px; border-bottom: 1px #176692 solid; color: #FFFFFF;">高关联事件</div>
        <div class="flex" style="margin: 20px 0 40px;">
          <div class="btn1" :class="btn ==1 ?'btn2':''" @click="btnchange(1)">样品1</div>
          <div class="btn1" :class="btn ==2 ?'btn2':''" @click="btnchange(2)">样品2</div>
          <div class="btn1" :class="btn ==3 ?'btn2':''" @click="btnchange(3)">样品3</div>
        </div>
        <div style="width: 500px; height: 220px;" id="bingtu"></div>
      </div>
      <div style="position: absolute; top: 508px; right: 20px; width: 500px; height: 450px; background: rgba(255,255,255,0.1); z-index: 9; border: 1px #176692 solid; border-radius: 5px;">
        <div style="height: 50px; line-height: 50px; padding-left: 30px; border-bottom: 1px #176692 solid; color: #FFFFFF;">高关联事件</div>
        <div id="zhexian" style="width: 500px; height: 400px;"></div>
      </div>
      <div style="position: absolute; right: 20px; top: 20px; font-size: 20px; color: #fff; z-index: 10; color: #01f9ff; font-family: 'Arial';"> {{time}}</div>
      <div id="ditu2" style="width: 900px; height: 900px; position: absolute; top: 108px; left: 570px;">
        <div style="height: 50px; line-height: 50px; padding-left: 30px; border-bottom: 1px #176692 solid; color: #FFFFFF;">高关联事件</div>
      </div>
    <!-- </div> -->

  </div>
</template>

<script>
  import * as echarts from 'echarts';
import { color } from 'echarts';
  import 'echarts-liquidfill'
  export default {
    name: 'zhuce',
    data() {
      return {
        data:'',
        time:"",
        i:0,
        btn:1
      }
    },
    created() {

    },

    mounted() {
      const test = document.getElementById('test')

      setInterval(()=>{
      	console.log(test.offsetTop,test.clientHeight)

      	if(this.i < 20){
      		this.i++
      	}else{
      		this.i = 0
      	}

      	test.scrollTo({top:this.i*42,behavior:'smooth'});
      },1000)


      setInterval(()=>{
        this.time = moment().format('YYYY-MM-DD hh:mm:ss')
      },1000)
      let url = '../../static/yunnan.json'
      if(!window.location.href.includes('local')){
        url = '/web/zhong/static/yunnan.json'
      }
      axios.get(url)
        .then(response => {
          this.data = response.data

          var chartDom2 = document.getElementById('ditu2');
          var myChart2 = echarts.init(chartDom2);


          echarts.registerMap('yunnan', this.data)

          var option2 = {
              tooltip: {
                  trigger: 'item',
                  formatter: '{b}: {c}'
              },
              visualMap: {
                left: 'left',
                min: 500000,
                max: 38000000,
                inRange: {
                  color: [
                    '#528bd5',
                    '#043879',
                  ]
                },
                text: ['High', 'Low'],
                calculable: true,
                textStyle:{
                  color:"#fff"
                }

              },
              series: [{
                  type: 'map',
                  map: 'yunnan',
                  label: {
                      show: true,
                      formatter: '{b}: {c}',
                      color:'#FFF'
                  },
                  data: [
                    { name: '玉溪市', value: 4822023 },
                    { name: '保山市', value: 731449 },
                    { name: '昭通市', value: 6553255 },
                    { name: '丽江市', value: 2949131 },
                    { name: '普洱市', value: 38041430 },
                    { name: '临沧市', value: 5187582 },
                    { name: '楚雄彝族自治州', value: 3590347 },
                    { name: '红河哈尼族彝族自治州', value: 917092 },
                    { name: '文山壮族苗族自治州', value: 632323 },
                    { name: '西双版纳傣族自治州', value: 19317568 },
                    { name: '大理白族自治州', value: 9919945 },
                    { name: '德宏傣族景颇族自治州', value: 1392313 },
                    { name: '怒江傈僳族自治州', value: 1595728 },
                    { name: '迪庆藏族自治州', value: 12875255 },
                    { name: '昆明市', value: 6537334 },
                    { name: '曲靖市', value: 3074186 },
                  ],
                  itemStyle: {
                     normal: {
                        borderColor: '#fff',
                        borderWidth: 1
                     },
                     emphasis: {
                        areaColor: '#fff',
                        label: {
                          color:"#000"
                        }
                     }
                  },
              }]
          }

          myChart2.setOption(option2)


          var chartDomz = document.getElementById('zhexian');
          var myChartz = echarts.init(chartDomz);


          var optionz = {

            tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: 'rgb(126,199,255)',
                },
            },
    },
legend: {
    data: ['廉颇老矣', '尚能饭否', '秋水共长天一色', '落霞与孤鹜齐飞'],
    textStyle:{
      color:"#fff"
    },
    top:20
  },
    grid: {
        top: '20%',
        left: '10%',
        right: '10%',
        bottom: '10%',
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                    color: 'rgb(41,188,245)',
                },
            },
            axisLabel: {
                //坐标轴刻度标签的相关设置
                textStyle: {
                    color: '#FFFFFF',
                    fontSize: 12,
                },
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#233653',
                },
            },
            axisTick: {
                show: false,
            },
            data: ['2018年1月', '2018年2月', '2018年3月', '2018年4月', '2018年5月', '2018年6月'],
        },
    ],
    yAxis: [
        {
            name: "",
            nameTextStyle: {
                color: "#fff",
                fontSize: 12,
                padding: [0, 60, 0, 0]
            },
            // minInterval: 1,
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#1160a0',
                    type: 'dashed'
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#008de7',
                },
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },

        },
    ],
            series: [
              {
                          name: '廉颇老矣',
                          type: 'line',
                          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                          smooth: true,
                          lineStyle: {
                              normal: {
                                  width: 1,
                                  color: '#00ffa2', // 线条颜色
                              },
                          },
                          itemStyle: {
                              normal: {
                                  color: '#00f0ff',//拐点颜色
                                  // borderColor: '#fff600',//拐点边框颜色
                                  // borderWidth: 13//拐点边框大小
                                  label: {
                                      show: true, //开启显示
                                      color: '#fff',
                                      position: 'top', //在上方显示
                                      formatter: function (res) {
                                          if (res.value) {
                                              return res.value
                                          } else {
                                              return 0
                                          }
                                      },
                                  },
                              },

                          },
                          symbolSize: 3,   //设定实心点的大小
                          areaStyle: {
                              normal: {
                                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                  color: new echarts.graphic.LinearGradient(
                                      0,
                                      0,
                                      0,
                                      1,
                                      [
                                          {
                                              offset: 0,
                                              color: '#00ffa230',
                                          },
                                          {
                                              offset: 0.6,
                                              color: '#00ffa220',
                                          },
                                          {
                                              offset: 1,
                                              color: '#00ffa210',
                                          },
                                      ],
                                      false
                                  ),
                              },
                          },
                          data: [20, 30, 40, 35, 34, 15, 56, 15, 12, 25, 34, 42],
                      },
                      {
                          name: '尚能饭否',
                          type: 'line',
                          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                          smooth: true,
                          lineStyle: {
                              normal: {
                                  width: 1,
                                  color: '#ffba00', // 线条颜色
                              },
                          },
                          itemStyle: {
                              normal: {
                                  color: '#fff600',//拐点颜色
                                  // borderColor: '#fff600',//拐点边框颜色
                                  // borderWidth: 13//拐点边框大小
                                  label: {
                                      show: true, //开启显示
                                      color: '#fff',
                                      position: 'top', //在上方显示
                                      formatter: function (res) {
                                          if (res.value) {
                                              return res.value
                                          } else {
                                              return 0
                                          }
                                      },
                                  },
                              },

                          },
                          symbolSize: 3,   //设定实心点的大小
                          areaStyle: {
                              normal: {
                                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                  color: new echarts.graphic.LinearGradient(
                                      0,
                                      0,
                                      0,
                                      1,
                                      [
                                          {
                                              offset: 0,
                                              color: '#ffba0030',
                                          },
                                          {
                                              offset: 0.6,
                                              color: '#ffba0020',
                                          },
                                          {
                                              offset: 1,
                                              color: '#ffba0010',
                                          },
                                      ],
                                      false
                                  ),
                              },
                          },
                          data: [34, 15, 56, 15, 12, 25, 34, 42, 20, 30,],
                      },
                      {
                          name: '落霞与孤鹜齐飞',
                          type: 'line',
                          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                          smooth: true,
                          lineStyle: {
                              normal: {
                                  width: 1,
                                  color: 'rgba(197,67,82,1)', // 线条颜色
                              },
                          },
                          itemStyle: {
                              normal: {
                                  color: 'rgba(197,67,82,1)',//拐点颜色
                                  // borderColor: '#fff600',//拐点边框颜色
                                  // borderWidth: 13//拐点边框大小
                                  label: {
                                      show: true, //开启显示
                                      color: '#fff',
                                      position: 'top', //在上方显示
                                      formatter: function (res) {
                                          if (res.value) {
                                              return res.value
                                          } else {
                                              return 0
                                          }
                                      },
                                  },
                              },

                          },
                          symbolSize: 3,   //设定实心点的大小
                          areaStyle: {
                              normal: {
                                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                  color: new echarts.graphic.LinearGradient(
                                      0,
                                      0,
                                      0,
                                      1,
                                      [
                                          {
                                              offset: 0,
                                              color: 'rgba(197,67,82,0.6)',
                                          },

                                          {
                                              offset: 1,
                                              color: 'rgba(197,67,82,0.1)',
                                          },
                                      ],
                                      false
                                  ),
                              },
                          },
                          data: [40, 85, 112, 5, 34, 12, 2, 30,],
                      },
                      {
                          name: '秋水共长天一色',
                          type: 'line',
                          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                          smooth: true,
                          lineStyle: {
                              normal: {
                                  width: 1,
                                  color: 'rgba(242,185,247,1)', // 线条颜色
                              },
                          },
                          itemStyle: {
                              normal: {
                                  color: 'rgba(242,185,247,1)',//拐点颜色
                                  // borderColor: '#fff600',//拐点边框颜色
                                  // borderWidth: 13//拐点边框大小
                                  label: {
                                      show: true, //开启显示
                                      color: '#fff',
                                      position: 'top', //在上方显示
                                      formatter: function (res) {
                                          if (res.value) {
                                              return res.value
                                          } else {
                                              return 0
                                          }
                                      },
                                  },
                              },

                          },
                          symbolSize: 3,   //设定实心点的大小
                          areaStyle: {
                              normal: {
                                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                  color: new echarts.graphic.LinearGradient(
                                      0,
                                      0,
                                      0,
                                      1,
                                      [
                                          {
                                              offset: 0,
                                              color: 'rgba(242,185,247,0.6)',
                                          },

                                          {
                                              offset: 1,
                                              color: 'rgba(242,185,247,0.1)',
                                          },
                                      ],
                                      false
                                  ),
                              },
                          },
                          data: [40, 85, 112, 5, 34, 12, 2, 30,],
                      }
            ]
          };

          myChartz.setOption(optionz)





          var chartDom = document.getElementById('shuiqiu1');
          var myChart = echarts.init(chartDom);
          var option = {
              backgroundColor: 'transparent',
              series: [
                  {
                      type: 'liquidFill',
                      radius: '90%',
                      center: ['50%', '50%'],
                      color: [
                          {
                              type: 'linear',
                              x: 0,
                              y: 0,
                              x2: 0,
                              y2: 1,
                              colorStops: [
                                  {
                                      offset: 0,
                                      color: '#1445f8',
                                  },
                                  {
                                      offset: 1,
                                      color: '#1039cd',
                                  },
                              ],
                              globalCoord: false,
                          },
                      ],
                      data: [0.6],
                      backgroundStyle: {
                          borderWidth: 0,
                          color: 'rgba(255,255,255,0.1)',
                      },
                      label: {
                          normal: {
                              textStyle: {
                                  fontSize: 20,
                                  color: '#fff',
                              },
                          }
                      },
                      outline: {
                          show: false,
                          borderDistance: 10,
                          itemStyle: {
                              borderWidth: 2,
                              borderColor: '#112165',
                          },
                      },
                  }
              ],
          };
          myChart.setOption(option)

          var chartDom2 = document.getElementById('shuiqiu2');
          var myChart2 = echarts.init(chartDom2);
          var option2 = {
              backgroundColor: 'transparent',
              series: [
                  {
                      type: 'liquidFill',
                      radius: '90%',
                      center: ['50%', '50%'],
                      color: [
                          {
                              type: 'linear',
                              x: 0,
                              y: 0,
                              x2: 0,
                              y2: 1,
                              colorStops: [
                                  {
                                      offset: 0,
                                      color: '#02a0d7',
                                  },
                                  {
                                      offset: 1,
                                      color: '#1039cd',
                                  },
                              ],
                              globalCoord: false,
                          },
                      ],
                      data: [0.8],
                      backgroundStyle: {
                          borderWidth: 0,
                          color: 'rgba(255,255,255,0.1)',
                      },
                      label: {
                          normal: {
                              textStyle: {
                                  fontSize: 20,
                                  color: '#fff',
                              },
                          }
                      },
                      outline: {
                          show: false,
                          borderDistance: 10,
                          itemStyle: {
                              borderWidth: 2,
                              borderColor: '#112165',
                          },
                      },
                  }
              ],
          };
          myChart2.setOption(option2)


          var chartDom3 = document.getElementById('shuiqiu3');
          var myChart3 = echarts.init(chartDom3);
          var option3 = {

              series: [
                  {
                      type: 'liquidFill',
                      radius: '90%',
                      center: ['50%', '50%'],
                      color: [
                          {
                              type: 'linear',
                              x: 0,
                              y: 0,
                              x2: 0,
                              y2: 1,
                              colorStops: [
                                  {
                                      offset: 0,
                                      color: '#5f26db',
                                  },
                                  {
                                      offset: 1,
                                      color: '#5f26db',
                                  },
                              ],
                              globalCoord: false,
                          },
                      ],
                      data: [0.9],
                      backgroundStyle: {
                          borderWidth: 0,
                          color: 'rgba(255,255,255,0.1)',
                      },
                      label: {
                          normal: {
                              textStyle: {
                                  fontSize: 20,
                                  color: '#fff',
                              },
                          }
                      },
                      outline: {
                          show: false,
                          borderDistance: 10,
                          itemStyle: {
                              borderWidth: 2,
                              borderColor: '#112165',
                          },
                      },
                  }
              ],
          };
          myChart3.setOption(option3)

        })

      this.bingtu()
    },
    watch:{

    },

    methods: {
      btnchange:function(id){
        this.btn = id
        this.bingtu()
      },
      bingtu:function(){
        let data = [
          { value: 1048, name: '杯莫停' },
          { value: 735, name: '铁马冰河' },
          { value: 580, name: '入梦来' },
          { value: 484, name: '夜阑卧听' },
          { value: 300, name: '风吹雨' }
        ]
        if(this.btn == 2){
          data = [
            { value: 48, name: '将进酒' },
            { value: 735, name: '杯莫停' },
            { value: 80, name: '呼儿将出换美酒' },
            { value: 484, name: '与尔同消' },
            { value: 30, name: '万古愁' }
          ]
        }
        if(this.btn == 3){
          data = [
            { value: 1048, name: '人有悲欢离合' },
            { value: 75, name: '月有阴晴圆缺' },
            { value: 50, name: '此事古难全' },
            { value: 484, name: '但愿人长久' },
            { value: 30, name: '千里共婵娟' }
          ]
        }
        var chartDom4 = document.getElementById('bingtu');
        var myChart4 = echarts.init(chartDom4);
        var option4 = {

            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',

              textStyle:{
                color:"#fff"
              },
              right:20,
              bottom:40

            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                center: ['30%', '50%'],
                data: data,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
        };
        myChart4.setOption(option4)
      }
    }
  }
</script>

<style scoped lang="less">
  .index{
    background: #00086c; width: 1920px; height:1080px; margin: 0 auto; position: relative;
    .dd{
      &:hover{ background: rgba(255,255,255,0.1);}
      .d1{ flex:1; cursor: pointer;}
    }
    .btn1{ width: 125px; font-weight: bold; text-align: center; line-height: 40px; cursor: pointer; background: #031447; color: #fff; font-size: 16px; border-top: 1px #008ed6 solid; margin-left: 25px;}
    .btn2{ background: #008ed6 !important; border-top: 1px #fff solid;}
  }
</style>
